<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
    draggable
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        编辑
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="onAddSubmit(formRef)"
          :model="state.form"
          label-position="right"
          :label-width="state.labelWidth + 'px'"
          :rules="rules"
        >
          <el-form-item prop="itemName" label="指标项名称">
            <el-input
              v-model="state.form.itemName"
              type="string"
              placeholder="指标项名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="告警策略" prop="ruleName">
            <el-select
              v-model="state.form.ruleName"
              placeholder="请选择告警策略名称"
              @change="selectCategory"
            >
              <el-option
                v-for="item in state.categoriesOptions"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="告警对象" prop="objectName">
            <el-select
              v-model="state.form.objectName"
              placeholder="请选择告警对象"
              @change="selectItemObject"
            >
              <el-option
                v-for="item in state.objectOptions"
                :key="item.objectId"
                :label="item.objectName"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="grainSize" label="统计粒度">
            <el-input
              v-model="state.form.grainSize"
              type="number"
              placeholder="统计粒度"
            >
              <template #append>分钟</template></el-input
            >
          </el-form-item>
          <el-form-item prop="symbol" label="判定符号">
            <el-select
              v-model="state.form.symbol"
              placeholder="判定符号"
              size="small"
            >
              <el-option
                v-for="i in warnItem.typeSymbol"
                :key="i.dictCode"
                :label="i.dictLabel"
                :value="i.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="value" label="黄色告警值">
            <el-input
              v-model="state.form.value"
              type="string"
              placeholder="黄色告警值"
            ></el-input>
          </el-form-item>
          <el-form-item prop="value2" label="橙色告警值">
            <el-input
              v-model="state.form.value2"
              type="string"
              placeholder="橙色告警值"
            ></el-input>
          </el-form-item>
          <el-form-item prop="value3" label="红色告警值">
            <el-input
              v-model="state.form.value3"
              type="string"
              placeholder="红色告警值"
            ></el-input>
          </el-form-item>
          <el-form-item prop="containNum" label="持续数量">
            <el-input
              v-model="state.form.containNum"
              type="number"
              placeholder="持续数量"
            ></el-input>
          </el-form-item>
          <el-form-item prop="frequency" label="告警频率">
            <el-input
              v-model="state.form.frequency"
              type="number"
              placeholder="告警频率"
            >
              <template #append>小时</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
        <el-button @click="closeForm">取消</el-button>
        <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="primary"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted, onBeforeUnmount } from "vue";
import type baTableClass from "@/utils/baTable";
import type {
  ElForm,
  FormItemRule,
  FormRules,
  FormInstance,
} from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";

const warnItem = inject("warnItem") as any; //告警指标项
const itemObject = inject("itemObject") as any; //告警对象
const category = inject("category") as any; //告警策略

const formRef = ref<InstanceType<typeof ElForm>>();
const { proxy } = useCurrentInstance(); //mitt

const state: {
  regionOptions: anyObj[];
  categoriesOptions: anyObj[];
  gatewayOptions: anyObj[];
  objectOptions: anyObj[];
  form: any;
  labelWidth: number;
  submitLoading: boolean;
} = reactive({
  regionOptions: [], //区域列表
  categoriesOptions: [], //告警类别列表
  gatewayOptions: [], //告警类别列表
  objectOptions: [], //告警对象列表
  form: {},
  labelWidth: 160,
  submitLoading: false,
});

interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();
const closeForm = () => {
  emits("update:modelValue", false);
};

const rules = reactive<FormRules>({
  color: [{ required: true, message: "级别颜色不能为空", trigger: "blur" }],
  mark: [{ required: true, message: "告警级别标注不能为空", trigger: "blur" }],
});

//提交表单
const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      //编辑
      warnItem.edit(state.form).then((res: any) => {
        closeForm();
        proxy.eventBus.emit("refreshDict");
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//编辑指标项表单
proxy.eventBus.on("editWarnItem", (data: any) => {
  state.form = data;
  console.log("编辑指标项表单", data);
});

//获取告警策略数据列表
const getWarnCategory = () => {
  category
    .getWarningCategoryList({ pageSize: 10000 })
    .then((res: any) => {
      console.log("获取告警策略", res);

      state.categoriesOptions = res;
    })
    .catch((err: any) => {});
};
//获取告警对象列表
const getobjectList = () => {
  itemObject
    .getWarningItemObjectList({ pageSize: 10000 })
    .then((res: any) => {
      state.objectOptions = res;
    })
    .catch((err: any) => {});
};

//选择告警策略
const selectCategory = (val: any) => {
  console.log("选择告警策略", val);
  state.form.ruleId = val.categoryId;
  state.form.ruleName = val.categoryName;
};
//选择告警对象
const selectItemObject = (val: any) => {
  console.log("选择告警对象", val);
  state.form.objectId = val.objectId;
  state.form.objectName = val.objectName;
  state.form.mqttFiled = val.mqttFiled;
};

onMounted(() => {
  getobjectList(); //获取告警对象列表
  getWarnCategory(); //获取告警策略数据列表
});

onBeforeUnmount(() => {
  proxy.eventBus.off("editWarnItem");
});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
